import React, { Component } from 'react'
import { Button, NavBar, InputItem, Toast } from 'antd-mobile';
import './index.less';
import github from './images/github.png';
import qq from './images/qq.png';
import weixin from './images/wechat.png';
import axios from 'axios';
export default class Login extends Component {
    state = {
        //用户输入的手机号
        phone: '',
        //用户输入的验证码
        code: '',
        //倒计时的总时间
        second: 5,
        //是否正在发送验证码
        isSending: false,
        //是否可以登录 can
        canLogin: false
    }
    //组件渲染方法
    render () {
        return (
            <div className="login-page">
                {/* 顶部导航 start */}
                <NavBar mode="light">手机验证码登录</NavBar>
                {/* 顶部导航 end */}

                {/* 表单区域 start */}
                <div className="form">
                    <div className="form-phone">
                        <InputItem type="number" clear value={this.state.phone} onChange={this.saveData('phone')} />
                    </div>

                    <div className="form-code">
                        <InputItem type="number" clear value={this.state.code} onChange={this.saveData('code')} />
                        <Button disabled={this.state.isSending} size="small" style={{ color: '#f56' }} onClick={this.sendCode}>获取验证码 {this.state.isSending ? this.state.second : ''} </Button>
                    </div>
                    <div className="gap-20"></div>
                    <div className="gap-10"></div>
                    <Button type="warning" onClick={this.login} disabled={!this.state.canLogin}>登录</Button>
                </div>
                {/* 表单区域 end */}

                <div className="gap-50"></div>
                {/* 其他登录 start */}
                <div className="other-login">
                    <div className="line">
                        <span>其他登录方式</span>
                    </div>
                    <div className="gap-20"></div>
                    <div className="gap-10"></div>
                    <div className="login-img">
                        <a href="https://github.com/login/oauth/authorize?client_id=6e2c61a214a0132c0d27"><img src={github} alt="" /></a>
                        <img src={qq} alt="" />
                        <img src={weixin} alt="" />
                    </div>
                </div>
                {/* 其他登录 end */}

                <div className="gap-50"></div>
                {/* 隐私说明 start */}
                <p className="intro">
                    未注册的手机号, 验证后会自动创建硅谷账号, 登录即代表您同意 <a href="http://www.atguigu.com">《硅谷隐私政策》</a>
                </p>
                {/* 隐私说明 end */}
            </div>
        )
    }
    //保存数据
    saveData = (type) => {
        return (value) => {
            this.setState({
                [type]: value
            })
        }
    }
    //发送验证码
    sendCode = async () => {
        //获取并验证用户输入的手机号
        let { phone } = this.state;
        //检测
        let reg = /^1\d{10}$/;
        if (!reg.test(phone)) {
            return Toast.fail('手机号格式错误');
        }
        //改变登录按钮的状态
        this.setState({
            isSending: true,
            canLogin: true
        });
        //启动一个定时器
        this.timer = setInterval(() => {
            let { second } = this.state;
            //自减
            second--;
            //设置
            this.setState({
                second: second
            });
            //判断
            if (second === 0) {
                //停止定时器
                clearInterval(this.timer);
                //还原状态
                this.setState({
                    isSending: false,
                    second: 5
                })
            }
        }, 1000)

        try {
            //如果输入正确
            let result = await axios.post('/login/digits', { phone });
            if (result.data.code === 20000) {
                Toast.success('发送成功');
            } else {
                Toast.fail('发送失败');
            }
        } catch (e) {
            Toast.fail('网路异常, 请稍后再试!!');
        }
    }
    //登录
    login = async () => {
        //登录 获取用户输入的手机号和验证码
        let { phone, code } = this.state;
        //判断
        let reg = /^1\d{10}$/;
        if (!reg.test(phone)) {
            return Toast.fail('手机号格式错误');
        }
        //验证码正则
        let codeReg = /^\d{6}$/;
        //比对
        if (!codeReg.test(code)) {
            return Toast.fail('验证码格式错误');
        }
        try {
            //发送 AJAX 请求
            let result = await axios.post('/login/phone', { phone, code });
            //判断
            if (result.data.code !== 20000) {
                Toast.fail('登录失败, 请重新登录');
            } else {
                Toast.success('登录成功');
                //编程式导航  push  replace  goBack  goForward
                this.props.history.push('/usercenter');
            }
        } catch (e) {
            Toast.fail('网络异常, 请稍后再试!!');
        }
    }
}
